<default-header class="top-header"></default-header>
<div class="wrap no-sidebar">
  <div class="sidebar-left collapse navbar-collapse navbar-collapse-2">
    <navbar-utility-mobile></navbar-utility-mobile>
  </div>
  <div class="middle">
    <!-- Middle section -->
    <div class="middle-section surface-shaded">
      <div class="middle-container has-scroll">
        <div class="middle-content">
          <div class="container surface-shaded gutter-top">
            <div class="col-md-12">
              <h1>{{'NewProject' | translate}}</h1>
              <form name="createProjectForm">
                <fieldset ng-disabled="disableInputs">
                  <div class="form-group">
                    <label for="name" class="required">{{'Name' | translate }}</label>
                    <span ng-class="{'has-error': (createProjectForm.name.$error.pattern && createProjectForm.name.$touched) || nameTaken}">
                      <input class="form-control input-lg"
                          name="name"
                          id="name"
                          placeholder="{{'my-project' | translate }}"
                          type="text"
                          required
                          take-focus
                          minlength="2"
                          maxlength="63"
                          pattern="[a-z0-9]([-a-z0-9]*[a-z0-9])?"
                          aria-describedby="nameHelp"
                          ng-model="name"
                          ng-model-options="{ updateOn: 'default blur' }"
                          ng-change="nameTaken = false"
                          autocorrect="off"
                          autocapitalize="off"
                          spellcheck="false">
                    </span>
                    <div>
                      <span class="help-block">{{'uniquename' | translate}}.</span>
                    </div>
                    <div class="has-error">
                      <span id="nameHelp" class="help-block" ng-if="createProjectForm.name.$error.pattern && createProjectForm.name.$touched">
                        {{'namesmayonly' | translate}}</span>
                    </div>
                    <div class="has-error">
                      <span class="help-block" ng-if="nameTaken">{{'choosedifferent' | translate}}</span>
                    </div>
                  </div>

                  <div class="form-group">
                    <label for="displayName">{{'DisplayName' | translate}}</label>
                    <input class="form-control input-lg"
                        name="displayName"
                        id="displayName"
                        placeholder="{{'my-project' | translate }}"
                        type="text"
                        ng-model="displayName">
                  </div>

                  <div class="form-group">
                    <label for="description">{{'Description' | translate}}</label>
                    <textarea class="form-control input-lg"
                        name="description"
                        id="description"
                        placeholder="{{'Ashortdescription' | translate}}"
                        ng-model="description"></textarea>
                  </div>

                  <div class="button-group">
                    <button type="submit"
                        class="btn btn-primary btn-lg"
                        ng-click="createProject()"
                        ng-disabled="createProjectForm.$invalid || nameTaken || disableInputs"
                        value="">{{'Create' | translate}}</button>
                    <a class="btn btn-default btn-lg" href="#" back>{{'Cancel' | translate}}</a>
                  </div>
                </fieldset>
              </form>
            </div>
          </div>
        </div><!-- /middle-content -->
      </div><!-- /middle-container -->
    </div><!-- /middle-section -->
  </div><!-- /middle -->
</div><!-- /wrap -->
